<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Popover 弹出框</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <h3>Popover 弹出框示例</h3>
        <p style="color: #666; line-height: 1.6;">
            Popover 是一个浮动在页面上的弹出框，通常用于显示额外的信息或操作选项。
        </p>

        <h3 style="margin-top: 30px;">基础 Popover</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button id="btn1" onclick="showPopover('popover1', 'btn1')">
                        显示基础 Popover
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('basic-popover-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-basic-popover-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-basic-popover-code" onclick="event.stopPropagation(); copyCode('basic-popover-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-basic-popover-code">
                <pre><code id="code-content-basic-popover-code">&lt;!-- HTML --&gt;
&lt;ons-button id="btn1" onclick="showPopover('popover1', 'btn1')"&gt;
    显示基础 Popover
&lt;/ons-button&gt;

&lt;ons-popover id="popover1" cancelable&gt;
    &lt;div style="padding: 20px; text-align: center;"&gt;
        &lt;p&gt;这是一个 Popover&lt;/p&gt;
        &lt;p style="color: #666;"&gt;点击外部区域可以关闭&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-popover&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showPopover(popoverId, targetId) {
    var popover = document.getElementById(popoverId);
    var target = document.getElementById(targetId);
    popover.show(target);
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带列表的 Popover</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <p style="margin: 10px 0;">
                    <ons-button id="btn2" onclick="showPopover('popover2', 'btn2')">
                        显示菜单 Popover
                    </ons-button>
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('list-popover-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-list-popover-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-list-popover-code" onclick="event.stopPropagation(); copyCode('list-popover-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-list-popover-code">
                <pre><code id="code-content-list-popover-code">&lt;!-- HTML --&gt;
&lt;ons-button id="btn2" onclick="showPopover('popover2', 'btn2')"&gt;
    显示菜单 Popover
&lt;/ons-button&gt;

&lt;ons-popover id="popover2" cancelable&gt;
    &lt;ons-list style="min-width: 200px;"&gt;
        &lt;ons-list-item tappable onclick="selectOption('编辑')"&gt;
            &lt;div class="left"&gt;
                &lt;ons-icon icon="md-edit"&gt;&lt;/ons-icon&gt;
            &lt;/div&gt;
            &lt;div class="center"&gt;编辑&lt;/div&gt;
        &lt;/ons-list-item&gt;
        &lt;ons-list-item tappable onclick="selectOption('分享')"&gt;
            &lt;div class="left"&gt;
                &lt;ons-icon icon="md-share"&gt;&lt;/ons-icon&gt;
            &lt;/div&gt;
            &lt;div class="center"&gt;分享&lt;/div&gt;
        &lt;/ons-list-item&gt;
    &lt;/ons-list&gt;
&lt;/ons-popover&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function selectOption(option) {
    document.querySelectorAll('ons-popover').forEach(function(popover) {
        popover.hide();
    });
    ons.notification.toast('选择了: ' + option, { timeout: 1500 });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">不同方向</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px;">
                    <ons-button id="btnTop" onclick="showPopover('popoverTop', 'btnTop')">
                        上方
                    </ons-button>
                    <ons-button id="btnBottom" onclick="showPopover('popoverBottom', 'btnBottom')">
                        下方
                    </ons-button>
                    <ons-button id="btnLeft" onclick="showPopover('popoverLeft', 'btnLeft')">
                        左侧
                    </ons-button>
                    <ons-button id="btnRight" onclick="showPopover('popoverRight', 'btnRight')">
                        右侧
                    </ons-button>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('direction-popover-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-direction-popover-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-direction-popover-code" onclick="event.stopPropagation(); copyCode('direction-popover-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-direction-popover-code">
                <pre><code id="code-content-direction-popover-code">&lt;!-- HTML --&gt;
&lt;!-- 上方 --&gt;
&lt;ons-popover id="popoverTop" cancelable direction="up"&gt;
    &lt;div style="padding: 15px;"&gt;
        &lt;p&gt;从上方显示&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-popover&gt;

&lt;!-- 下方 --&gt;
&lt;ons-popover id="popoverBottom" cancelable direction="down"&gt;
    &lt;div style="padding: 15px;"&gt;
        &lt;p&gt;从下方显示&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-popover&gt;

&lt;!-- 左侧 --&gt;
&lt;ons-popover id="popoverLeft" cancelable direction="left"&gt;
    &lt;div style="padding: 15px;"&gt;
        &lt;p&gt;从左侧显示&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-popover&gt;

&lt;!-- 右侧 --&gt;
&lt;ons-popover id="popoverRight" cancelable direction="right"&gt;
    &lt;div style="padding: 15px;"&gt;
        &lt;p&gt;从右侧显示&lt;/p&gt;
    &lt;/div&gt;
&lt;/ons-popover&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">实际应用场景</h3>
        <ons-card>
            <div class="content">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h4 style="margin: 0;">文章标题</h4>
                        <p style="color: #666; margin: 5px 0; font-size: 14px;">这是文章的简短描述</p>
                    </div>
                    <ons-button id="btnMore" modifier="quiet" onclick="showPopover('popoverMore', 'btnMore')">
                        <ons-icon icon="md-more-vert"></ons-icon>
                    </ons-button>
                </div>
            </div>
        </ons-card>

        <div style="margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
            <h4>使用提示</h4>
            <p style="color: #666; line-height: 1.6;">
                Popover 会自动定位到触发按钮附近，并根据屏幕空间自动调整显示位置。
            </p>
        </div>
    </div>

    <!-- 基础 Popover -->
    <ons-popover id="popover1" cancelable>
        <div style="padding: 20px; text-align: center;">
            <p style="margin: 0;">
                <ons-icon icon="md-info" size="40px" style="color: #4a90e2;"></ons-icon>
            </p>
            <p style="margin: 15px 0 10px 0; font-weight: bold;">这是一个 Popover</p>
            <p style="margin: 0; color: #666; font-size: 14px;">
                点击外部区域可以关闭
            </p>
        </div>
    </ons-popover>

    <!-- 带列表的 Popover -->
    <ons-popover id="popover2" cancelable>
        <ons-list style="min-width: 200px;">
            <ons-list-item tappable onclick="selectOption('选项 1')">
                <div class="left">
                    <ons-icon icon="md-edit"></ons-icon>
                </div>
                <div class="center">编辑</div>
            </ons-list-item>
            <ons-list-item tappable onclick="selectOption('选项 2')">
                <div class="left">
                    <ons-icon icon="md-share"></ons-icon>
                </div>
                <div class="center">分享</div>
            </ons-list-item>
            <ons-list-item tappable onclick="selectOption('选项 3')">
                <div class="left">
                    <ons-icon icon="md-copy"></ons-icon>
                </div>
                <div class="center">复制</div>
            </ons-list-item>
            <ons-list-item tappable onclick="selectOption('删除')">
                <div class="left">
                    <ons-icon icon="md-delete" style="color: #ff6b6b;"></ons-icon>
                </div>
                <div class="center" style="color: #ff6b6b;">删除</div>
            </ons-list-item>
        </ons-list>
    </ons-popover>

    <!-- 不同方向的 Popover -->
    <ons-popover id="popoverTop" cancelable direction="up">
        <div style="padding: 15px;">
            <p style="margin: 0;">从上方显示</p>
        </div>
    </ons-popover>

    <ons-popover id="popoverBottom" cancelable direction="down">
        <div style="padding: 15px;">
            <p style="margin: 0;">从下方显示</p>
        </div>
    </ons-popover>

    <ons-popover id="popoverLeft" cancelable direction="left">
        <div style="padding: 15px;">
            <p style="margin: 0;">从左侧显示</p>
        </div>
    </ons-popover>

    <ons-popover id="popoverRight" cancelable direction="right">
        <div style="padding: 15px;">
            <p style="margin: 0;">从右侧显示</p>
        </div>
    </ons-popover>

    <!-- 更多操作 Popover -->
    <ons-popover id="popoverMore" cancelable>
        <ons-list style="min-width: 180px;">
            <ons-list-item tappable onclick="selectOption('收藏')">
                <div class="left">
                    <ons-icon icon="md-favorite-border"></ons-icon>
                </div>
                <div class="center">收藏</div>
            </ons-list-item>
            <ons-list-item tappable onclick="selectOption('分享')">
                <div class="left">
                    <ons-icon icon="md-share"></ons-icon>
                </div>
                <div class="center">分享</div>
            </ons-list-item>
            <ons-list-item tappable onclick="selectOption('举报')">
                <div class="left">
                    <ons-icon icon="md-flag"></ons-icon>
                </div>
                <div class="center">举报</div>
            </ons-list-item>
        </ons-list>
    </ons-popover>

    <script>
        function showPopover(popoverId, targetId) {
            var popover = document.getElementById(popoverId);
            var target = document.getElementById(targetId);
            popover.show(target);
        }

        function selectOption(option) {
            // 关闭所有 popover
            document.querySelectorAll('ons-popover').forEach(function(popover) {
                popover.hide();
            });
            
            ons.notification.toast('选择了: ' + option, {
                timeout: 1500
            });
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
